<!--表单搜索组合-->
<template>
  <div v-if="searchList.length > 0">
    <a-form :layout="layout" :form="form" @submit="handleSubmit">
      <a-form-item
        v-for="(item, index) in searchList"
        :key="index"
        :colon="false"
        :label="item.label"
      >
        <a-select
          v-if="item.type === 'search'"
          :placeholder="
            item.placeholder ? item.placeholder : '请选择' + item.label
          "
          v-decorator="[item.name, { rules: item.rules ? item.rule : [] }]"
          :style="item.style ? item.style : { width: '172px' }"
        >
          <a-select-option
            v-for="i in item.option"
            :value="i.value"
            :key="i.value"
            >{{ i.title }}</a-select-option
          >
        </a-select>
        <a-input
          v-if="item.type === 'input'"
          v-decorator="[item.name, { rules: item.rules ? item.rule : [] }]"
          :placeholder="
            item.placeholder
              ? '请按' + item.placeholder + '搜索'
              : '请按标题输入'
          "
          :style="item.style ? item.style : { width: '172px' }"
        ></a-input>
        <a-date-picker
          v-if="item.type === 'date-picker'"
          :placeholder="item.placeholder"
        ></a-date-picker>
        <a-range-picker
          v-if="item.type === 'range-picker'"
          :placeholder="['开始时间', '结束时间']"
        ></a-range-picker>
      </a-form-item>
      <a-form-item v-if="needSearchBtn">
        <a-button type="primary" html-type="submit" icon="search"
          >搜索</a-button
        >
      </a-form-item>
      <a-form-item v-if="needDownloadBtn">
        <a-button type="primary" @click="handleDownload">下载</a-button>
      </a-form-item>
      <a-form-item v-if="needResetBtn">
        <a-button type="primary" @click="handleReset" icon="reload"
          >重置</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { urlEncode } from "../../tool/lib";
import { mapState } from "vuex";
export default {
  name: "search",
  props: {
    searchList: {
      type: Array
    },
    needSearchBtn: {
      type: Boolean,
      default: true
    },
    needResetBtn: {
      type: Boolean,
      default: true
    },
    needDownloadBtn: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: "inline"
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit("formValue", values);
        }
      });
    },
    handleDownload(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = urlEncode(values);
          let link = document.createElement("a");
          link.download = "";
          link.href = "" + url;
          link.style.display = "none";
          link.click();
        }
      });
    },
    handleReset() {
      this.form.resetFields();
    }
  }
};
</script>

<style scoped lang="less"></style>
